import { ref, onMounted, onUnmounted } from '@vue/runtime-core'
import { game } from '../Game'


const commandType = {
    upAndDown: "upAdnDown",
    leftAndRight: "leftAndRight",
}
export const useKeyboardMove = (x, y, speed, limit) => {

    let controled = false;

    const { minX = 10, maxX = game.stage.width, minY = 0, maxY = game.stage.height } = limit;

    const moveX = ref(x);
    const moveY = ref(y);

    const moveCommands = [];

    const downCommand = {
        type: commandType.upAndDown,
        dir: 1,
        id: 1,
    };

    const upCommand = {
        type: commandType.upAndDown,
        dir: -1,
        id: 2,
    };

    const leftCommand = {
        type: commandType.leftAndRight,
        dir: -1,
        id: 3,
    };

    const rightCommand = {
        type: commandType.leftAndRight,
        dir: 1,
        id: 4,
    };


    const findUpAndDownCommand = () => {
        return moveCommands.find(command => command.type == commandType.upAndDown)
    };
    const findLeftAndRightCommand = () => {
        return moveCommands.find(command => command.type == commandType.leftAndRight)
    };

    const isExistCommand = (command) => {
        return moveCommands.findIndex(c => c.id === command.id) > -1
    };
    const removeCommand = command => {
        let index = moveCommands.findIndex(c => c.id === command.id)
        if (index > -1) {
            moveCommands.splice(index, 1)
        }
    };
    const handlerTricker = () => {
        const upAndDownCommand = findUpAndDownCommand();
        if (upAndDownCommand) {
            moveY.value += upAndDownCommand.dir * speed;
            if (moveY.value > maxY) {
                moveY.value = maxY
            } else if (moveY.value < minY) {
                moveY.value = minY
            }
        }
        const leftAndRightCommand = findLeftAndRightCommand();
        if (leftAndRightCommand) {
            moveX.value += leftAndRightCommand.dir * speed;
            if (moveX.value > maxX) {
                moveX.value = maxX
            } else if (moveX.value < minX) {
                moveX.value = minX
            }
        }
    };
    const commandMap = {
        ArrowLeft: leftCommand,
        ArrowRight: rightCommand,
        // ArrowUp: upCommand,
        // ArrowDown: downCommand,
    };
    const handleKeyDown = (e) => {
        const command = commandMap[e.code];
        if (command && !isExistCommand(command)) {
            moveCommands.unshift(command)
        }
    };
    const handleKeyUp = (e) => {
        const command = commandMap[e.code];
        if (command) {
            removeCommand(command)
        }
    };
    onMounted(() => {

        beginControl();
    });
    onUnmounted(() => {

        endControl();
    });
    const endControl = () => {
        if (controled) {
            controled = false;
            game.ticker.remove(handlerTricker);
            window.removeEventListener("keydown", handleKeyDown);
            window.removeEventListener("keyup", handleKeyUp);
        }
    }
    const beginControl = () => {
        if (!controled) {
            controled = true;
            game.ticker.add(handlerTricker);
            window.addEventListener("keydown", handleKeyDown);
            window.addEventListener("keyup", handleKeyUp);
        }

    }
    return {
        x: moveX,
        y: moveY,
        beginControl,
        endControl,
    };
}